<template>
	<view :info="info" :change:info="input.infoChange">
		<input :value="modelValue" type="text" v-bind="$attrs" v-on="$listenersWithoutInput" @input="input.onInput"
			@tap="input.onTap">
	</view>
</template>
<!--  -->
<script>
	/**
	 * Input 聚焦但是不弹出键盘
	 * 方案（此处采用前两个）：
	 * 1. 使用 input 新属性，inputmode
	 */
	export default {
		name: "tk-input",
		props: {
			modelValue: {
				type: [String, Number],
				default: ''
			},
			// 是否允许编辑，即点击的时候不弹出软键盘
			allowEdit: {
				type: Boolean,
				default: false
			}
		},
		model: {
			prop: 'modelValue',
			event: 'update:modelValue'
		},
		emits: ['input', 'update:modelValue'],
		data() {
			return {
				inputEvent: {},
				info: {
					cmd: '',
					allowEdit: false,
					random: Math.random()
				}
			}
		},
		watch: {
			allowEdit: {
				immediate: true,
				handler: function(newVal) {
					this.info.allowEdit = newVal;
				}
			}
		},
		created() {
			// const callback = res => {
			// 	if (res.height > 0) {
			// 		// uni.hideKeyboard()
			// 	}
			// }
			// uni.onKeyboardHeightChange(callback)
			// this.$once('hook:beforeDestory', () => uni.offKeyboardHeightChange(callback))
		},
		computed: {
			$listenersWithoutInput() {
				const extractEvent = ['input']
				const $listeners = this.$listeners || {}
				let temp = {}
				for (let key in $listeners) {
					if (extractEvent.indexOf(key) === -1) temp[key] = this.$listeners[key]
					else this.inputEvent = this.$listeners[key]
				}
				return temp
			}
		},
		methods: {
			_input(event) {
				this.$emit('update:modelValue', event.detail.value)
				// triggerInput
				if (typeof this.inputEvent === 'function') {
					this.inputEvent(event)
				} else {
					this.inputEvent.forEach(cb => cb(event))
				}
			},
			focus() {
				this.info = Object.assign({}, this.info, {
					cmd: 'focus',
					random: Math.random()
				});
			},
			showKeyboard() {
				this.info = Object.assign({}, this.info, {
					cmd: 'showKeyboard',
					random: Math.random()
				});
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			setText(val) {
				this.$emit('update:modelValue', val)
			}
		}
	}
</script>

<script module="input" lang="renderjs">
	export default {
		data() {
			return {
				info: {
					cmd: '',
					allowEdit: false,
					random: Math.random()
				}
			}
		},
		mounted() {
			// inputmode="none" 实现input聚焦但是不弹出键盘，浏览器兼容性不好
			this.$el.querySelector('input').setAttribute('inputmode', 'none')
			// this.$el.querySelector('input').setAttribute('focus', 'true')
		},
		methods: {
			onInput(event, ownerInstance) {
				this.$el.querySelector('input').setAttribute('inputmode', 'text')
				ownerInstance.callMethod('_input', event)
			},
			/**
			 * 主动点击
			 */
			onTap() {
				this.$el.querySelector('input').setAttribute('inputmode', this.info.allowEdit ? 'text' : 'none')
				this.$el.querySelector('input').focus();
			},
			/**
			 * @description 命令改变
			 * @param {Object} newValue
			 * @param {Object} oldValue
			 * @param {Object} ownerInstance
			 * @param {Object} instance
			 */
			infoChange(newValue, oldValue, ownerInstance, instance) {
				this.info = newValue;
				switch (newValue.cmd) {
					case 'focus':
						this.$el.querySelector('input').setAttribute('inputmode', 'none')
						this.$el.querySelector('input').focus();
						break;
					case 'showKeyboard':
						this.$el.querySelector('input').setAttribute('inputmode', 'text')
						this.$el.querySelector('input').focus();
						break;
					default:
						break;
				}
				// console.log('newValue', newValue)
				// console.log('oldValue', oldValue)
				// console.log('ownerInstance', ownerInstance)
				// console.log('instance', instance)
			}
		}
	}
</script>

<style>

</style>
